<template>
	<div>
		<!-- 参考资料弹窗 -->
		<el-dialog v-model="meansDialogVisible" title="添加参考资料" width="720" align-center center>
			<div class="relative" style="width: 450px;margin: 0 auto;">
				<el-input  style="width: 450px;height: 44px;" 
				size="large"
				placeholder="请输入关键词搜索..."
				:prefix-icon="Search"
				v-model="queryParams.keyword"
				 />
				<!-- <el-icon size="large" color="#333">
				  <Search />
				</el-icon> -->
				<el-button type="primary" style="background: #4DACB1;border: 1px solid #4DACB1;position: absolute;height: 44px;width: 96px;right: 0;"
					@click="handleSearch()">
					搜索
				</el-button>
			</div>
			<!-- <div class="mt30">
				<el-button  style="width: 90px;height: 38px;"
				:class="{'tabActive':tab == 0}"
				@click="tabFunc(0)">
					解决方案
				</el-button>
				<el-button @click="tabFunc(1)"
				:class="{'tabActive':tab == 1}"
				style="width: 90px;height: 38px;"
				>产品</el-button>
			</div> -->
			<div class="mt20">
				<el-table
				   v-loading="loading"
				   :data="productList"
				   style="width: 100%;"
				 :header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}"
				 :cell-style="{height:'54px'}"
				 @selection-change="handleSelectionChange"
				>
				   <el-table-column type="selection" width="55" align="center" />
				  <el-table-column :label="tab ==0 ? '解决方案名称' :'产品名称'" align="center" prop="productName" :show-overflow-tooltip="true" />
				   <el-table-column label="适用作物" align="center" prop="recommendedCropsName" :show-overflow-tooltip="true" />
				   <el-table-column label="适用靶标" align="center" prop="recommendedTargetsName" :show-overflow-tooltip="true" />
				
				</el-table>
				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"  @pagination="getList"/>
			</div>
			<template #footer>
				<div class="dialog-footer text-right">
					<el-button @click="close()">取消</el-button>
					<el-button type="primary" style="background: #4DACB1;border: 1px solid #4DACB1;"
						@click="addInfo()">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import { listProduct } from "@/api/business/product";
	export default{
		data(){
			return{
				tab:1,//1暂定默认产品
				meansDialogVisible:false,//添加参考资料
				productList:[],//产品列表
				total:0,
				loading:true,
				queryParams:{
					pageNum:1,
					pageSize:10,
					keyword:''
				},
				ids:[],//复选框选中的id
				selectArr:[]
			}
		},
		created() {
			this.getList()
		},
		methods:{
			tabFunc(num){
				this.tab = num
				this.$forceUpdate()
			},
			open(){
				this.meansDialogVisible = true
			},
			close(){
				this.meansDialogVisible = false
			},
			// 复选框
			handleSelectionChange(selection){
				this.selectArr = []
				for(let key in selection){
					let item = {
						recordId:selection[key].id,
						recordName:selection[key].productName,
						type:this.tab,
						typeName:this.tab == 0 ? '解决方案' : '产品'
					}
					this.selectArr.push(item)
				}
				this.ids = selection.map(item => item.id )
			},
			// 搜索框
			handleSearch(){
				this.queryParams.pageNum = 1
				this.getList()
			},
			/** 查询产品列表 */
			getList() {
			  this.loading = true;
			  listProduct(this.queryParams).then((response) => {
			    this.productList = response.rows;
			    this.total = response.total;
			    this.loading = false;
				console.log(this.productList,'productList')
			  });
			},
			//添加
			addInfo(){
				if(this.ids.length == 0){
					this.$message.error('请选择数据');
					return false;
				}
				this.$emit('addFunc',this.selectArr)
				this.close()
				console.log(this.selectArr,'ids')
			}
		}
	}
</script>

<style>
</style>